<template>
  <div class="box">
    <!-- 右上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="涌水量监测"
      style="height:253px"
    >
      <!-- 涌水量监测 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">瞬时涌水量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{yslSpeed}}</span
            ><span class="piece">m³/h</span>
          </p>
        </div>
        <div class="charttitle">
          近24小时涌水量监测
          <HerinSelect
            v-model="currentYslValue"
            class="herin-select"
            :options="yslOptions"
            place-holder=""
            :height="28"
            :width="160"
            :showOptionscount="4"
            @HerinSelectChange="yslChange"
            style="background-color: rgba(255, 255, 255, 0.1)"
          />
        </div>
        <div class="outage" style="height:110px">
          <LineChart
            :chartData="yslCharts"
            :text="['涌水量']"
            unit="m³/h"
            :color="['#3D6BBE']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 右中box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="传感器调校监测"
      style="height:253px"
    >
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">瞬时排水量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{pslSpeed}}</span
            ><span class="piece">m³/h</span>
          </p>
        </div>
        <div class="charttitle">
          近24小时排水量监测
          <HerinSelect
            v-model="currentPslValue"
            class="herin-select"
            :options="pslOptions"
            place-holder=""
            :height="28"
            :width="160"
            :showOptionscount="4"
            @HerinSelectChange="pslChange"
            style="background-color: rgba(255, 255, 255, 0.1)"
          />
        </div>
        <div class="outage" style="height:110px">
          <LineChart
            :chartData="pslCharts"
            :text="['排水量']"
            unit="m³/h"
            :color="['#3D6BBE']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 右下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="水文异常告警监测"
      style="height:454px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, i) in titletab"
          :key="i"
          :class="['btn', isbtn === item ? 'isbtn' : '']"
          @click="clickTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="MainCoal-box-content" slot="content">
        <!-- 水文异常告警监测 告警分析 -->
        <div v-if="isbtn === '告警分析'" class="sensorSort">
          <div class="broken">
            <div>
              <span class="title">今日告警</span>
              <span><span class="num">{{todayCount}}</span><span class="piece">次</span></span>
            </div>
            <div>
              <span class="title">累计告警</span>
              <span
                ><span class="num">{{totalCount}}</span><span class="piece">次</span></span
              >
            </div>
          </div>
          <div class="charttitle">今日告警分类</div>
          <div class="Chart">
            <div class="chat" v-if="isbtn === '告警分析'">
              <RoseChart :data="cateLists" :color="color" />
            </div>
            <div class="cont">
              <Legend1
                v-for="(item, idx) in cateLists"
                :key="item.x"
                class="item"
                :name="item.x"
                :num="item.y"
                :color="color[idx]"
                unit=""
              ></Legend1>
            </div>
          </div>
          <div class="charttitle">近30天告警趋势统计分析</div>
          <div style="height: 153px">
            <LineChart
              :chartData="chartAlarmStatistics"
              :text="['告警']"
              :area="true"
              unit="次"
              :color="['#00E3E8']"
            />
          </div>
        </div>
        <!-- 水文异常告警监测  告警记录列表 -->
        <div v-if="isbtn === '告警记录'" style="height: 380px">
          <div class="search-wrap">
            <HerinSelect
              v-model="selectType"
              class="herin-select"
              :options="areaOptions"
              place-holder=""
              :height="28"
              :width="160"
              :showOptionscount="3"
              @HerinSelectChange="handleSelectChange"
              style="background-color: rgba(255, 255, 255, 0.05)"
            />
            <div
              class="input-box"
              style="background-color: rgba(255, 255, 255, 0.05)"
            >
              <input v-model="searchInput" type="text" placeholder="搜索..." />
              <i
                v-show="searchInput"
                class="el-icon el-icon-close"
                @click="clearInput"
              />
              <i class="el-icon el-icon-search" @click="handleSearch" />
            </div>
          </div>
          <div
            class="outageBox"
            style="height: 350px; overflow: auto; padding-right: 10px"
          >
            <div
              class="outageList"
              v-for="(v, outageList) in outageList"
              :key="outageList"
            >
              <div class="cont">
                <p class="title">{{ v.yjyuanyin }}</p>
                <p></p>
              </div>
              <div class="state">
                <span>{{ v.createTime }}</span>
                <p>
                  <img src="@/assets/img/monitor/icon-6.png" alt="" />{{ v.local }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import LineChart from '@/components/chart/line/LineChart.vue';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import Legend1 from '@/components/chart/legend/Legend1.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';

import { getYslList, getYslSpeed, getYslStatistics, getPslList, getPslSpeed, getPslStatistics, getAlarmCount, getAlarmStatistics, getAlarmLocals, getAlarmPage } from '@/api/item/monitor/hydrology.js';
import { xFormat } from '@/utils/date';
export default {
  components: {
    HerinContainer,
    LineChart,
    Legend1,
    HerinSelect,
    RoseChart
  },
  data() {
    return {
      outageList: [
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        },
        {
          title: '涌水量超限',
          time: '2022-02-09 12:23:19',
          show: '251119综采向导'
        }
      ],
      yslOptions: [
        {
          value: '5161529149994972525', label: '中央水仓入口'
        }
      ],
      yslSpeed: '',
      yslCharts: [],
      pslOptions: [
        {
          label: '40204运顺1#管路',
          value: '4628936852959813680'
        }
      ],
      pslSpeed: '',
      pslCharts: [],
      currentYslValue: '5161529149994972525',
      currentPslValue: '4628936852959813680',
      drain: '监测点编号',
      selectOption: [
        {
          label: '全部区域',
          value: '全部区域'
        }
      ],
      selectType: '全部区域',
      searchInput: '',
      cateLists: [],
      areaOption: [],
      color: ['#00FDFF', '#57FFAA', '#34C8FF', '#FFD101', '#FB9B2A'],
      chartSpeedData: [
        { x: '00:00', y: 5, s: '总涌水量' },
        { x: '06:00', y: 7, s: '总涌水量' },
        { x: '12:00', y: 15, s: '总涌水量' },
        { x: '18:00', y: 20, s: '总涌水量' },
        { x: '24:00', y: 17, s: '总涌水量' }
      ],
      chartData: [
        { x: '00:00', y: 5, s: '总排水量' },
        { x: '06:00', y: 7, s: '总排水量' },
        { x: '12:00', y: 15, s: '总排水量' },
        { x: '18:00', y: 20, s: '总排水量' },
        { x: '24:00', y: 17, s: '总排水量' }
      ],
      chartAlarmStatistics: [],
      count: 'content',
      list: '',
      titletab: ['告警分析', '告警记录'],
      isbtn: '告警分析',
      totalCount: '',
      todayCount: '',
      actionLoopTimer3S: null,
      actionLoopTimer1H: null
    };
  },
  computed: {
    areaOptions() {
      return [...this.selectOption, ...this.areaOption];
    }
  },
  watch: {
    yslOptions: {
      handler(value) {
        if (value) {
          this.currentYslValue = value[0]?.value;
        }
      },
      deep: true
    },
    pslOptions: {
      handler(value) {
        if (value) {
          this.currentPslValue = value[0]?.value;
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getYslList();
    this.getPslList();

    this.startActionLoop3S(this.all3SFn);
    this.startActionLoop1H(this.all1HFn);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },
  methods: {
    all3SFn() {
      this.getYslSpeed();
      this.getPslSpeed();
      this.getAlarmCount();
      this.getAlarmLocals();
      this.getAlarmPage();
    },
    all1HFn() {
      this.getYslStatistics();
      this.getPslStatistics();
      this.getAlarmStatistics();
    },
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1H 循环查询数据
    startActionLoop1H(callback) {
      callback();
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    // 获取所有的涌水量站点
    async getYslList() {
      const res = await getYslList();
      if (res.data.code === 200) {
        this.yslOptions = res.data.data.map(item => {
          return {
            label: item.zdname,
            value: item.zdnum
          };
        });
      }
    },
    // 获取瞬时涌水量
    async getYslSpeed() {
      const res = await getYslSpeed();
      if (res.data.code === 200) {
        this.yslSpeed = res.data.data.value;
      }
    },
    // 获取涌水量近24小时的统计数据
    async getYslStatistics() {
      const res = await getYslStatistics(this.currentYslValue);
      if (res.data.code === 200) {
        this.yslCharts = res.data.data.map(item => {
          return {
            x: xFormat(item.x),
            y: item.y * 1,
            s: item.s
          };
        });
      }
    },
    // 获取所有的排水量站点
    async getPslList() {
      const res = await getPslList();
      if (res.data.code === 200) {
        this.pslOptions = res.data.data.map(item => {
          return {
            label: item.zdname,
            value: item.zdnum
          };
        });
      }
    },
    // 获取瞬时排水量
    async getPslSpeed() {
      const res = await getPslSpeed();
      if (res.data.code === 200) {
        this.pslSpeed = res.data.data.value;
      }
    },
    // 获取排水量近24小时的统计数据
    async getPslStatistics() {
      const res = await getPslStatistics(this.currentPslValue);
      if (res.data.code === 200) {
        this.pslCharts = res.data.data.map(item => {
          return {
            x: xFormat(item.x),
            y: item.y * 1,
            s: item.s
          };
        });
      }
    },
    // 点击24小时涌水下拉菜单
    yslChange() {
      this.getYslStatistics(this.currentYslValue);
    },
    // 点击24小时排水下拉菜单
    pslChange() {
      this.getPslStatistics(this.currentPslValue);
    },

    // 获取水文异常告警数量
    async getAlarmCount() {
      const res = await getAlarmCount();
      if (res.data.code === 200) {
        this.totalCount = res.data.data.totalCount;
        this.todayCount = res.data.data.todayCount;
        this.cateLists = res.data.data.localCounts.map(item => {
          return {
            x: item.key,
            y: item.value * 1
          };
        });
      }
    },

    // 获取水文异常告警区域列表
    async getAlarmLocals() {
      const res = await getAlarmLocals();
      if (res.data.code === 200) {
        this.areaOption = res.data.data.map(item => {
          return {
            label: item.name,
            value: item.code
          };
        });
      }
    },

    // 获取水文异常告警近30天统计分析
    async getAlarmStatistics() {
      const res = await getAlarmStatistics();
      if (res.data.code === 200) {
        this.chartAlarmStatistics = res.data.data.map(item => {
          return {
            x: item.x,
            y: item.y * 1,
            s: item.s
          };
        });
      }
    },

    // 获取传感器概括列表数据
    async getAlarmPage() {
      const params = {
        keyWord: this.searchInput,
        size: 0,
        current: 0
      };
      if (this.selectType !== '全部区域') {
        params['local'] = this.selectType;
      }
      const res = await getAlarmPage(params);
      if (res.data.code === 200) {
        this.outageList = res.data.data.records;
      }
    },
    // 点击传感器概括下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.getAlarmPage();
    },
    // 点击传感器概括搜索按钮
    handleSearch() {
      this.getAlarmPage();
    },
    // 点击传感器概括清除搜索框
    clearInput() {
      this.searchInput = '';
      this.getAlarmPage();
    },
    // 点击水文异常告警监测  右下
    clickTitleTab(item) {
      this.isbtn = item;
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.5rem;
  }
  .outageBox {
    width: calc(100% + 10px);
    .outageList:last-child{
      margin-bottom: 0;
    }
    .outageList {
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      height: 3.5rem;
      margin-bottom: 10px;
      .cont {
        justify-content: space-between;
        display: flex;
        p {
          align-items: center;
          display: flex;
        }
        .title {
          color: rgba(248, 248, 248, 100);
          font-size: 14px;
        }
      }
      .state {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: rgba(173, 173, 173, 100);
        margin-top: 0.625rem;
        img {
          width: 0.875rem;
          height: 0.875rem;
          margin-right: 0.625rem;
        }
        p {
          width: 7.5rem;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .broken {
    height: 2.125rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .sensorSort {
    height: 23.75rem;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    .chat {
      width: 8.5625rem;
      height: 7.4375rem;
    }
    .right {
      width: 8.125rem;
      height: 7.4375rem;
      display: flex;
      flex-direction: column;
      align-content: space-between;
      p {
        margin: 0;
      }
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .title {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        margin: 0 0.75rem 0 0.375rem;
        display: inline-block;
        width: 2.25rem;
      }
      .num {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin-right: 0.3125rem;
      }
    }
  }
  .Chart {
    display: flex;
    justify-content: space-between;
      height: 7.375rem;
    .chat {
      width: 7.375rem;
      height: 7.375rem;
    }
    .cont {
      width: 11rem;
      height: 7.6875rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .item {
        min-width: 3.6rem;
      }
    }
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .input-box {
      width: 10rem;
      height: 1.75rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
